<template>
  <div class="app-container">
    <div class="app-content-container">
      <grid-table :data="tableData" :perfect="false" :columns="columns" :buttons="buttons" @remote-method="getList">
      </grid-table>
    </div>
    <Modal v-model="showOptions"
           scrollable
           footer-hide
           title="表格配置">
      <json-viewer v-if="currentRow && currentRow.gridOptions"
                   :value="JSON.parse(currentRow.gridOptions)"
                   :expand-depth=5
                   copyable
                   boxed>
      </json-viewer>
    </Modal>
    <Modal v-model="showEdit" scrollable title="编辑" @on-ok="confirmUpdate">

    </Modal>
  </div>
</template>

<script>
  import { listTable } from '@/api/business/table'
  import JsonViewer from 'vue-json-viewer'
  import GridTable from '@/components/GridTable/index'

  export default {
    name: 'GenTable',
    components: { JsonViewer, GridTable },
    data() {
      return {
        loading: false,
        showOptions: false,
        showEdit: false,
        currentRow: null,
        buttons: [
          { type: 'add' }
        ],
        columns: [
          { field: 'tableId', title: 'Id', width: 80, align: 'center' },
          { field: 'parentId', title: '模板Id', width: 80, align: 'center' },
          { field: 'tableName', title: '表格名称', width: 180, align: 'center' },
          { field: 'gridOptions', title: '表格配置', headerAlign: 'center' },
          { title: '操作', align: 'center', width: 120,
            slots: {
              default: ({ row }) => {
                return [
                  <vxe-button type='text' nativeOnClick={ () => { this.viewOptions(row) } }>查看</vxe-button>,
                  <vxe-button type='text' nativeOnClick={ () => { this.handleUpdate(row) } }>编辑</vxe-button>
                ]
              }
            }
          }
        ],
        tableData: [],
      }
    },
    created() {
      this.getList()
    },
    methods: {
      confirmUpdate() {

      },
      handleUpdate(row) {
        this.showEdit = true
      },
      viewOptions(row) {
        this.showOptions = true
        this.currentRow = row
        console.log(this.currentRow)
      },
      getList() {
        this.loading = true
        listTable().then(res => {
          this.tableData = res.rows
          this.loading = false
        }).catch(_ => {
          this.loading = false
        })
      }
    }
  }
</script>

<style scoped>

</style>
